﻿/// <reference path="../../../../scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../../../../scripts/typings/highlightjs/highlightjs.d.ts" />
/// <reference path="../../../../scripts/typings/jquery.autosize/jquery.autosize.d.ts" />

module ExtendedWiki {

    declare var context;

    export class InsertCodeSnipped  {


        
        //private cssClass: string;
        //private element: HTMLElement;
        //private test:any; 
         
        constructor( ) {

            this.insertMarker();
            $('.modal').on('hide.bs.modal', this.insertCodeInPlaceHolder);

            context = this;

            window.document.getElementById("Ew-CodePreviewInput").onkeyup = () => { context.updateCodePreview(); }

        }

        insertMarker() {
           
            if ($("#ms-rterangecursor-start").length > 0) {

                $(".Ew-codePlaceHolder").remove();
                $("<span class='Ew-codePlaceHolder' />").insertBefore("#ms-rterangecursor-start");
            }
        }

        updateCodePreview() {
             
            $('#Ew-CodePreviewInput').autosize();   
             
            // Code of the userinput
            var codePreviewInput = (<HTMLInputElement>window.document.getElementById("Ew-CodePreviewInput")).value;

            // Copy Code to preview window
            $(".Ew-CodePreview code").text(codePreviewInput);

            // Find selected codetype
            var codeType = $(".Ew-CodeTypeButtons").find("label[class*='active']").text().trim();
             
            // Set selected codetype
            switch (codeType) {
                 
                case "HTML":
                    $(".Ew-CodePreview code").removeAttr('class').attr('class', 'xml');
                    break;

                case "CSS":
                    $(".Ew-CodePreview code").removeAttr('class').attr('class', 'css');
                    break;


                case "JavaScript":
                    $(".Ew-CodePreview code").removeAttr('class').attr('class', 'javascript');
                    break;

                case "C#":
                    $(".Ew-CodePreview code").removeAttr('class').attr('class', 'cs');
                    break;

                default: // If Automatic is selected, HighkightJs auto detec it
                    $(".Ew-CodePreview code").removeAttr('class').attr('class', '');
            }
             
            // run highlightJS to style the code
            $('pre code').each(function (i, e) { hljs.highlightBlock(e) });
        }

        insertCodeInPlaceHolder()   {

            if ($('.Ew-codePlaceHolder').length > 0) {

                var highlightedCode = $("<pre>" + $('.Ew-CodePreview').html() + "</pre>");

                var replacements = { "{{highlightedCode}}": highlightedCode, "{{Title}}": "Title"};

                var codeTemplate = "<div class='panel panel-default'>" +
                                    "<div class='panel-heading' >" +
                                        "<h3 class='panel-title'>{{Title}}</h3 >" +
                                    "</div>" +
                                    "<div class='panel-body'>" +
                                        "{{highlightedCode}}"+
                                    "</div>" +
                                    "</div>";
                 
                // replace var in template
                codeTemplate = codeTemplate.replace(/{{\w+}}/g, all => replacements[all] || all);
                 
                // Add CodeView to page
                $(codeTemplate).insertBefore(".Ew-codePlaceHolder");
                $('.Ew-codePlaceHolder').remove();
            }
        }
    }
};


var a = new ExtendedWiki.InsertCodeSnipped();